.icon-types {
	&--padding {
		iconify-icon {
			margin-right: 6px;
			box-shadow: 0 0 2px currentColor;
			background-color: var(--vp-c-bg);
			background-image: var(--icon-grid);
			background-size: 8px;
		}
	}

	iconify-icon {
		vertical-align: -0.125em;
		color: var(--c-blue-dimmed);
		transition: color 0.3s ease;

		&:nth-child(3n + 1) {
			color: var(--c-green-dimmed);
		}
		&:nth-child(3n + 2) {
			color: var(--c-purple-dimmed);
		}
		&:last-of-type {
			margin-right: 4px;
		}
	}

	&-18 {
		iconify-icon {
			font-size: 18px;
			vertical-align: -4px;
		}
	}
	&-24 {
		iconify-icon {
			font-size: 24px;
			line-height: 24px;
			vertical-align: -6px;
		}
	}

	&:hover {
		iconify-icon {
			color: var(--vp-c-brand-accent);
		}
	}

	&--grid {
		display: flex;
		gap: 8px;
		div {
			width: 96px;
			height: 96px;
			background: url('/assets/images/common/guides-grid1.png') no-repeat;
			background-size: contain;
		}
		div:nth-child(2) {
			background-image: url('/assets/images/common/guides-grid2.png');
		}

		@media (min-width: 600px) {
			div {
				width: 192px;
				height: 192px;
			}
		}
	}
}
